<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-03-04 13:45
 * @LastEditTime: 2021-03-11 11:30:35
  *@LastEdititors
-->
<template>
  <div id="login" :style="{height:$inerHeight + 'px'}">
    <div class="img">
      <img src="/static/default_header.png" alt="图标" width="100%" height="186px">
    </div>
    <div class="group">
      <cube-input v-model="mobile" class="input-name" placeholder="请输入手机号" :clearable="true">
        <span class="iconfont iconshouji" slot="prepend"></span>
      </cube-input>
      <div class="line"></div>
      <cube-input  type="password" v-model="password"  class="input-pass" placeholder="请输入密码" :eye="{open:false}">
        <span class="iconfont iconmima" slot="prepend"></span>
      </cube-input>
      <div class="btn" @click="login">登录</div>
      <div class="text-box">
        <div class="forget" @click="toNewPage('/forget')">忘记密码</div>
        <div class="reg">
          没有账号?
          <span @click="toNewPage('/reg')">注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 手机号
      mobile: '',
      // 密码
      password: ''
    }
  },
  created () {
    console.log('进入构子函数')
    // this.$toast('请输入手机号', 'warn')
    // console.log(this.$md5('test'))
  },
  methods: {
    login () {
      if (this.mobile === '') {
        this.$toast('请输入手机号')
      } else if (this.password === '') {
        this.$toast('请输入密码')
      } else {
        this.apis.login({
          phone: this.$md5(this.mobile),
          password: this.$md5(this.password)
        }).then((res) => {
          // console.log(res)
          if (res.code === '200') {
            localStorage.setItem('info', JSON.stringify(res.info)) // 保存用户信息
            localStorage.setItem('userId', res.id) // 保存用户id
            this.$toast('正在登陆', 'loading', 2000)
            setTimeout(() => {
              this.toNewPage('/home')
            }, 2000)
          } else if (res.code === -1) {
            this.$toast(res.msg)
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../node_modules/stylus-px2rem";
  #login{
  .img{
    position relative;
    top:0px;
  }
    .group
    {
      width: 80%;
      margin: 0 auto;
      margin-top:20px;
      display: flex;
      flex-flow: column;
      justify-content space-around
      div
      {
        border none
        .iconshouji,.iconmima
        {
          font-size:10px
          color: rgb(255,102,153)
        }
      }
      .input-name,.input-pass
      {
        margin: 2px 0px
      }
      .btn
      {
        line-height 15px
        color:snow;
        position relative
        top:10px;
        border-radius: 20px;
        background-color: #fd88fa;
        background-image: linear-gradient(90deg, #ffbdd3 0%, #ff6699 100%);
      }
      .text-box
      {
        position relative
        width 100%
        top:20px;
        height 50px;
        color:#999
        font-size:6px
        .forget
        {
          text-decoration underline
          float:left;
        }
        .reg
        {
          float:right;
          span
          {
            text-decoration underline
            color:#ff74a3;
          }
        }
      }
    }
}
</style>
